<template>
  <div id="speak">
    <Row type="flex" justify="center" class="code-row-bg">
      <Col :md="12" :xs="24">
        <Card class="input_box">
           <Divider orientation="left">留言</Divider>
           <Input v-model="speak_data.text" type="textarea" :rows="4" placeholder="你想说什么..." />
           <Row type="flex" justify="end" class="code-row-bg">
                <Button icon="ios-create" :disabled="!if_login" class="btn" @click="addSpeak">
                  <strong v-if="!if_login">请先登录</strong>
                  <strong v-if="if_login">发表</strong>
                </Button>
           </Row>
        </Card>
      </Col>
    </Row>
    <Row type="flex" justify="center" class="code-row-bg">
      <Col :md="12" :xs="21">
        <Divider orientation="left">精彩留言</Divider>
        <Timeline>
                <TimelineItem v-for="(v1,i1) in speaks_list" :key="v1.i1" class="timeitem">
                    <div class="header">
                      <Avatar class="avatar" icon="ios-person" size="large" :src="src+users_list[v1.user_id].avatar"/>
                      <div class="user">
                        <p class="name">{{users_list[v1.user_id].name}}</p>
                        <p class="time">{{v1.time}}</p>
                      </div>
                    </div>
                    <div class="content">
                        {{v1.text}}
                    </div>
                </TimelineItem>
            </Timeline>
      </Col>
    </Row>
  </div>
</template>

<script>
  export default {
    name: 'Speak',
    data() {
      return {
        if_login:'',
        src:this.$src+'tp5_jzt-blog_server/public/uploads/avatar/',
        user_data:'',
        speak_data:{
          user_id:'',
          text:'',
        },

        users_list:'',
        speaks_list:'',
      }
    },
    components: {

    },
    methods: {
      showdata(){
        this.$axios({
          method: 'post',
          url: 'tp5_jzt-blog_server/public/index.php/home/speak',
          data: {
            speak_data: this.speak_data
          },
        }).then((res) => {
          console.log('评论列表数据：',res.data);
          this.speaks_list=res.data.speaks_list;
          this.users_list=res.data.users_list;
          // console.log(this.speaks_list);
          // console.log(this.users_list);
        }).catch((error) => {
          console.log(error)
        })
      },
      addSpeak(){
        if(this.speak_data.text==''){
          this.$Message.error('留言内容不能为空！');
          return false;
        }else {
          this.speak_data.user_id=this.user_data.user_id;
          // console.log(this.speak_data);
          this.$axios({
            method: 'post',
            url: 'tp5_jzt-blog_server/public/index.php/home/addspeak',
            data: {
              speak_data: this.speak_data
            },
          }).then((res) => {
            // console.log(res.data)
            this.speak_data.text='';
            this.$Message.success('发表成功!');
            this.$router.go(0)
          }).catch((error) => {
            console.log(error)
          })
        }
      },
      ifLogin(){
        if (sessionStorage.getItem("userdata")) {
          this.if_login = true;
          this.user_data = JSON.parse(sessionStorage.getItem("userdata"));
        } else {
          this.if_login = false;
        }
      }
    },
    created() {
      this.ifLogin();
      this.showdata();
    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .input_box{
    margin: 15px;
    }
    .btn{
    margin: 15px;
    }
    .timeitem:hover{
        color: #2D8CF0;
    }
    .timeitem .header{
        margin: 5px;
        display: flex;
        justify-items: center;
        align-content: center;
    }
    .timeitem .user{
        margin-left: 15px;
    }
    .timeitem .user .name{
        text-align: center;
        font-size: 16px;
    }
    .timeitem .user .time{
        text-align: center;
        font-size: 10px;
    }
    .timeitem .content{
        padding: 5px;
        font-size: 18px;
    }
</style>
